<template>
  <div class="left-bottom">
    <TitleItem title="防范" describe="有招除隐患" />
    <div class="left-bottom-content">
      <div class="item1">
        <div class="item-left">
          <img src="@/assets/image/home/left/renfang.png" alt="" />
          <div class="text">
            <p>430,178</p>
            <p>人防</p>
          </div>
        </div>
        <div class="item-right">
          <div class="list">
            <div
              class="list-item"
              v-for="item in defenses.airDefense"
              :key="item.id"
              :style="{ 'margin-right': item.id === 4 ? '0px' : '51px' }"
            >
              <span>{{ item.number }}</span>
              <span>人</span>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <div class="bottom-img">
          <img src="@/assets/image/home/left/ffdk.png" />
        </div>
      </div>
      <div class="item2">
        <div class="item-left">
          <img src="@/assets/image/home/left/wufang.png" alt="" />
          <div class="text">
            <p>39,772</p>
            <p>物防</p>
          </div>
        </div>
        <div class="item-right">
          <div class="list">
            <div
              class="list-item"
              v-for="item in defenses.physicalDefense"
              :key="item.id"
              :style="{ 'margin-right': item.id === 4 ? '0px' : '41px' }"
            >
              <span>{{ item.number }}</span>
              <span>件</span>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <div class="bottom-img">
          <img src="@/assets/image/home/left/ffdk.png" />
        </div>
      </div>
      <div class="item3">
        <div class="item-left">
          <img src="@/assets/image/home/left/jifang.png" alt="" />
          <div class="text">
            <p>14,583</p>
            <p>技防</p>
          </div>
        </div>
        <div class="item-right">
          <div class="list">
            <div
              class="list-item"
              v-for="item in defenses.technicalDefense"
              :key="item.id"
              :style="{ 'margin-right': item.id === 4 ? '0px' : '66px' }"
            >
              <span>{{ item.number }}</span>
              <span>次</span>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <div class="bottom-img">
          <img src="@/assets/image/home/left/ffdk.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleItem from "@/components/titleItem/index.vue";
import { reactive } from "vue";

export default {
  name: "LeftBottom",
  components: {
    TitleItem,
  },
  setup() {
    const defenses = reactive({
      // 人防
      airDefense: [
        {
          id: 1,
          number: "32,489",
          text: "武警",
        },
        {
          id: 2,
          number: "32,489",
          text: "交警",
        },
        {
          id: 3,
          number: "32,489",
          text: "特警",
        },
        {
          id: 4,
          number: "32,489",
          text: "巡警",
        },
        {
          id: 5,
          number: "32,489",
          text: "防暴警",
        },
        {
          id: 6,
          number: "32,489",
          text: "治安警",
        },
        {
          id: 7,
          number: "32,489",
          text: "其他",
        },
      ],
      // 物防
      physicalDefense: [
        {
          id: 1,
          number: "32,489",
          text: "天眼",
        },
        {
          id: 2,
          number: "32,489",
          text: "巡防无人机",
        },
        {
          id: 3,
          number: "8",
          text: "公安检查站",
        },
        {
          id: 4,
          number: "381",
          text: "街面警务站",
        },
      ],
      //技防
      technicalDefense: [
        {
          id: 1,
          number: "32,489",
          text: "治安战法使用",
        },
        {
          id: 2,
          number: "32,489",
          text: "经侦战法使用",
        },
        {
          id: 3,
          number: "381",
          text: "刑侦战法使用",
        },
      ],
    });
    return {
      defenses,
    };
  },
};
</script>

<style lang="scss" scoped>
.left-bottom {
  width: 100%;
  margin-top: 14px;
  &-content {
    position: relative;
    padding-top: 20px;
    height: 348px;
    .item1,
    .item2,
    .item3 {
      width: 609px;
      display: flex;
      position: relative;
      margin: 0 auto;
    }
    .item1 {
      height: 108px;
    }
    .item2,
    .item3 {
      height: 95px;
      align-items: center;
    }
    .item-left {
      display: flex;
      align-items: center;
      margin-right: 20px;
      > img {
        width: 48px;
        height: 48px;
        margin-right: 14px;
        margin-left: 19px;
      }
      .text {
        p {
          font-weight: bold;
          &:first-child {
            font-family: DIN Next LT Pro;
            font-size: 26px;
            color: #edb200;
            line-height: 37px;
            width: 93px;
          }
          &:last-child {
            font-size: 14px;
            color: #fff;
            line-height: 24px;
          }
        }
      }
    }
    .bottom-img {
      position: absolute;
      bottom: 0;
      height: 45px;
      > img {
        width: 609px;
        height: 45px;
      }
    }
    .item-right {
      display: flex;
      .list {
        display: flex;
        color: #cbddff;
        font-size: 12px;
        font-family: Source Han Sans CN;
        flex-wrap: wrap;

        span {
          &:first-child {
            font-family: DIN Next LT Pro;
            color: #64feff;
            font-size: 18px;
            margin-right: 2px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>